<template>
  <div class="w-64 flex-shrink-0 bg-white border-r border-gray-200">
    <!-- Logo -->
    <div class="flex h-16 items-center justify-center">
      <img src="@/assets/imges/logo.png" alt="Logo" class="h-8 w-8 mr-2" />
      <span class="text-lg font-semibold">育考星管理端</span>
    </div>

    <!-- 菜单 -->
    <el-menu
      :default-active="activeMenu"
      background-color="#ffffff"
      text-color="#333333"
      active-text-color="#2468f2"
      :router="true"
    >
      <template v-for="route in filteredRoutes" :key="route.path">
        <!-- 没有子菜单的情况 -->
        <el-menu-item
          v-if="!route.children || route.children.length === 0"
          :index="route.path"
          class="menu-item"
        >
          <el-icon v-if="route.meta?.icon">
            <component :is="route.meta.icon" />
          </el-icon>
          <span>{{ route.meta?.title || route.name }}</span>
        </el-menu-item>

        <!-- 有子菜单的情况 -->
        <el-sub-menu v-else :index="route.path" class="submenu-item">
          <template #title>
            <el-icon v-if="route.meta?.icon">
              <component :is="route.meta.icon" />
            </el-icon>
            <span>{{ route.meta?.title || route.name }}</span>
          </template>

          <el-menu-item
            v-for="child in filteredChildren(route.children)"
            :key="child.path"
            :index="child.path"
            class="submenu-child-item"
          >
            <el-icon v-if="child.meta?.icon">
              <component :is="child.meta.icon" />
            </el-icon>
            <span>{{ child.meta?.title || child.name }}</span>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { useRouteStore } from '@/store/modules/route'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const route = useRoute()
const routeStore = useRouteStore()
const role = localStorage.getItem('role')

// 过滤掉 isShow 为 false 的路由
const filteredRoutes = computed(() => {
  // 根据角色获取不同的菜单
  if (role === 'teacher') {
    return routeStore.teacherMenus || []
  } else {
    return routeStore.studentMenus || []
  }
})

// 过滤子路由中 isShow 为 false 的项
const filteredChildren = (children) => {
  if (!children) return []
  return children.filter((child) => child.meta?.isShow !== false)
}

// 当前激活的菜单
const activeMenu = computed(() => route.path)
</script>

<style scoped>
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item) {
  height: 50px;
  line-height: 50px;
  margin: 4px 8px;
  border-radius: 4px;
}

:deep(.el-menu-item.is-active) {
  background-color: #ecf5ff !important;
  color: #2468f2 !important;
  font-weight: 500;
}

:deep(.el-menu-item:hover:not(.is-active)) {
  background-color: #f5f7fa !important;
  color: #2468f2 !important;
}

:deep(.el-sub-menu__title) {
  height: 50px;
  line-height: 50px;
  margin: 0 8px;
  border-radius: 4px;

  &:hover {
    background-color: #f5f7fa !important;
  }
}

:deep(.el-sub-menu.is-active) {
  .el-sub-menu__title {
    color: #2468f2 !important;
  }
}

:deep(.el-sub-menu .el-menu-item.is-active) {
  background-color: #ecf5ff !important;
  color: #2468f2 !important;
}

:deep(.el-sub-menu__title) {
  padding-left: 16px !important;
}

:deep(.el-menu-item) {
  padding-left: 16px !important;
}

:deep(.el-sub-menu .el-menu-item) {
  padding-left: 40px !important;
  min-width: auto;
}

:deep(.el-icon) {
  margin-right: 8px;
  font-size: 18px;
}

/* 蓝色立即购买按钮样式 */
.blue-button {
  display: block;
  background-color: #2468f2;
  color: white;
  border-radius: 4px;
  text-align: center;
  padding: 10px 0;
  margin: 16px;
  font-weight: 500;
}
</style>
